<template>
  <div
    class="WorkingSchedule"
    v-loading="loading"
    element-loading-text="拼命加载中"
  >
    <el-form
      size="mini"
      ref="form"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="运营订单编码/款号" class="myform-item">
          <el-input
            v-model="form.number"
            placeholder="请输入运营订单编码/款号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="结案状态" class="myform-item">
          <el-select v-model="form.approval_state" placeholder="请选择">
            <el-option label="全部" value=""> </el-option>
            <el-option label="已结案" value="1"> </el-option>
            <el-option label="未结案" value="0"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-top: 39px">
          <div style="display: flex">
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="onNew">新建</el-button>
            <el-upload
              :disabled="isDisabled"
              style="margin-left: 10px"
              action="https://ssy.13yu.com/index.php/Admin/Excel/setexport_order_import"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload"
              :on-error="onError"
            >
              <el-button size="mini" type="">导入运营订单</el-button>
            </el-upload>
            <el-button
              type=""
              size="mini"
              @click="onDownload"
              style="margin-left: 10px"
              >运营订单导入模板</el-button
            >
          </div>
        </el-form-item>
      </div>
      <div></div>
    </el-form>

    <el-table
      ref="mytable"
      size="mini"
      :data="tableData"
      style="width: 100%"
      border
    >
      <el-table-column
        label="运营订单"
        align="center"
        prop="number"
      ></el-table-column>
      <el-table-column label="结案状态" align="center" prop="approval_state">
        <template slot-scope="{ row }">
          <div
            :style="{
              borderColor: row.approval_state == 0 ? '' : '#67C23A',
            }"
          >
            {{ row.approval_state == 0 ? "未结案" : "已结案" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="锁定状态" align="center" prop="state">
        <template slot-scope="{ row }">
          <div
            :style="{
              color: row.state == 0 ? '#67C23A' : row.state == 1 ? 'red' : '',
            }"
          >
            {{ row.state == 0 ? "正常" : row.state == 1 ? "锁定" : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="款号"
        align="center"
        prop="numberlist"
        width="300"
      >
        <template slot-scope="{ row }">
          <span
            v-for="(item, index) in row.numberlist"
            :key="index"
            style="color: #2c70d6"
          >
            {{ index != 0 ? "，" : "" }}{{ item.product_number }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="数量/实际数量" align="center" prop="count">
        <template slot-scope="{ row }">
          {{ row.count }}/{{ row.real_count }}
        </template>
      </el-table-column>
      <el-table-column label="总价" align="center" prop="price">
      </el-table-column>
      <el-table-column label="内部交期" align="center" prop="delivery_date">
        <template slot-scope="{ row }">
          {{ row.delivery_date | timestamp }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="下单时间"
        align="center"
        prop="qty"
      ></el-table-column> -->
      <el-table-column
        label="创建人"
        align="center"
        prop="creator"
      ></el-table-column>
      <el-table-column label="创建时间" align="center" prop="creation_time">
        <template slot-scope="{ row }">
          {{ row.creation_time | timestamp }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template scope="{ row }">
          <el-button type="text" size="default" @click="onLook(row.id)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="default"
            @click="onEdit(row.id)"
            v-if="row.state != 1"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="default"
            @click="onLock(row.id)"
            v-if="row.state == 0"
            style="color:red"
            >锁定</el-button
          >

          <!-- <el-button type="text" size="default" style="color: red"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminOperateget_export_order_list"
    />
  </div>
</template>
  
  <script>
import {
  postAdminOperateget_export_order_list,
  postAdminOperatesave_export_order_locking,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  filters: {
    timestamp(data) {
      if (data) {
        let timestamp = Number(data) + 1512518400;
        let nowDate = new Date(timestamp * 1000);
        let year = nowDate.getFullYear();
        let month =
          nowDate.getMonth() + 1 < 10
            ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1;
        let day =
          nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
        let dateStr = year + "-" + month + "-" + day;
        return dateStr;
      }
    },
  },
  data() {
    return {
      loading: false,
      isDisabled: false,
      browserHeight: "",
      height: `${document.documentElement.clientHeight - 400}`,
      form: {
        number: "",
        approval_state: "",
        page: 1,
        size: 20,
      },
      tableData: [],
      total: 1,
    };
  },
  async activated() {
    let browserHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.browserHeight = browserHeight - 290;
    this.postAdminOperateget_export_order_list(this.form);
  },
  methods: {
    // 锁定
    async onLock(id) {
      let form = this.form
      this.$confirm('确定禁用该数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await postAdminOperatesave_export_order_locking({id})
          this.postAdminOperateget_export_order_list(form);
        }).catch(() => {       
        });
      
    },
    onDownload() {
      window.open(
        "https://ssy.13yu.com/Public/excel/moban//%E8%BF%90%E8%90%A5%E8%AE%A2%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
      );
    },
    beforeUpload() {
      this.isDisabled = true;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 0) {
        this.$message.success(res.msg);
        let form = this.form;
        this.postAdminOperateget_export_order_list(form);
      } else {
        this.$message.warning(res.msg);
      }
      this.isDisabled = false;
    },
    onError() {
      this.isDisabled = false;
    },
    onNew() {
      this.$router.push({
        name: "OperationalDepartmentOrderListDetail",
      });
    },
    onEdit(id) {
      this.$router.push({
        name: "OperationalDepartmentOrderListDetail",
        query: {
          id,
        },
        params: {
          isEdit: true,
        },
      });
    },
    onLook(id) {
      this.$router.push({
        name: "OperationalDepartmentOrderListDetail",
        query: {
          id,
        },
      });
    },
    // 采购列表
    async postAdminOperateget_export_order_list(data) {
      this.loading = true;
      this.form = data;
      postAdminOperateget_export_order_list(data)
        .then((res) => {
          this.loading = false;
          this.savetime = res.savetime;
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 搜索
    async onSearch() {
      this.form.page = 1;
      this.form.size = 20;
      await this.postAdminOperateget_export_order_list(this.form);
      await this.postAdminOperateget_export_order_list(this.form);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.searchleft {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 3px;
  .searchleft-button {
    text-align: center;
    height: 28px;
    width: 60px;
    line-height: 28px;
    background: #eee;
    color: #000;
  }
  /deep/ .el-select {
    width: 140px;
    display: inline-block;
    input {
      font-size: 12px;
      border: none;
      background: none;
    }
  }
}
.date {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .date-left {
    display: flex;
    align-items: center;
    .date-left-time {
      display: flex;
      align-items: center;
      .date-left-time-button {
        border: 1px solid #ddd;
        height: 28px;
        width: 36px;
        text-align: center;
        line-height: 28px;
        border-radius: 4px;
        color: #999;
      }
      .date-left-time-list {
        display: flex;
        margin: 0 10px;
        > div {
          height: 28px;
          width: 140px;
          text-align: center;
          line-height: 28px;
          border: 1px solid #ddd;
        }
        > div:not(:nth-child(1)) {
          border-left: none;
        }
        > div:nth-child(1) {
          border-top-left-radius: 4px;
          border-end-start-radius: 4px;
        }
        > div:nth-last-child(1) {
          border-top-right-radius: 4px;
          border-end-end-radius: 4px;
        }
      }
    }
  }
}
.borderSelect {
  border: 1px solid #2e71d6 !important;
  background: rgba(46, 113, 214, 0.1);
  color: #2e71d6;
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
  /deep/ .el-upload-list {
    display: none;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  font-size: 14px;
}
</style>
  